Sliders Guidelines 滑塊指導規則
Usage 用法
滑塊允許使用者沿著軌道檢視並選擇一個數值(或範圍)。它們非常適合用於調整音量、亮度等設定,或者應用影象濾鏡。滑塊可以使用圖示或標籤來表示數字或相對比例。

滑塊改變的內容要即時更新顯示,這樣使用者能在移動滑塊時直接看到調整的效果。
滑塊可以以幾種方式配置:
- Continuous or discrete 連續或離散
- Continuous 連續:從一個範圍中選擇一個值,無額外限制。
- Discrete 離散:從一系列由終止標記標明的預定值中選擇一個值。
- 居中:從正負值範圍內選擇一個值。起始值位於中心位置。
- 範圍選擇:在一個滑塊上選擇兩個值以建立一個範圍。
滑塊必須是連續的或離散的。這兩種配置也可以居中並且具有範圍選擇。
Anatomy 結構

Track 軌道;追蹤;跟蹤
軌道顯示滑塊的可選值範圍,包括活動和非活動兩部分。
- 活動部分:從最小值到滑塊手柄(範圍滑塊則是兩個手柄之間)。
- 非活動部分:從手柄到最大值(範圍滑塊則是手柄外側)。
值的增長方向跟隨書寫方向:LTR語言從左到右遞增,RTL語言則相反。

Stop indicators 停止指示器
在離散滑塊上,停止指示器顯示軌道上的預設值,滑塊會自動吸附到最近的停止點。避免過多停止指示器,以免影響視覺效果和操作。其他型別滑塊的停止指示器僅用於顯示非活動軌道的末端值。

Handle 手柄
移動手柄以選擇值。對於雙手柄滑塊,可選擇範圍的最小值和最大值。
Value (optional) 值(可選)
此數值對應控制柄當前所在位置。數值在控制柄互動時顯示,範圍滑塊每次僅顯示一個值。
Adding extra elements to the slider向滑塊新增額外元素
可以用外部文字輸入欄位代替內建值標籤。滑塊和文字欄位的值會自動同步,並支援透過製表鍵在兩者間切換。
可以在滑塊外部新增圖示或文字,以指示數值範圍,使滑塊範圍更易於識別。這可以替代停止指示器使用。

Behavior 行為
Select and drag 選擇並拖動
透過拖動滑塊選擇一個值。
Select jump 選擇跳轉
透過選擇軌道的一部分來選擇一個值。
Select and arrow 選擇並指向
使用鍵盤控制:
Tab: 選中手柄
箭頭鍵: 調整數值
空格 + 箭頭鍵: 大幅調整數值
Interaction & style 互動與樣式
點選或拖動時,手柄縮小並顯示數值,提供視覺反饋。
Touch 觸控:手柄縮小並顯示數值。
Cursor 游標:懸停時游標改變,點選時手柄縮小並顯示數值。
Focus and navigation 聚焦與導航
滑塊手柄是主要互動元素,因此會獲得初始焦點。使用者可透過方向鍵和鍵盤導航來調整值。
Color contrast 色彩對比度
請使用視覺錨點確保滑塊滿足 Material 可訪問性要求。
當非活動軌道與背景對比度低於3:1時,在軌道兩端新增停止指示器或高對比度圖示(至少3:1)。









